<!doctype html>
{% extends "base.html" %}
{% block title %}系统监控{% endblock title %}

{% block page3_show %}show{% endblock page3_show %}
{% block page3.1_active %}active{% endblock page3.1_active %}


{% block main_content %}
<div class="container-fluid p-0">

    <h1 class="h3 mb-2">Chart.js - 可视化图表</h1>
    <h6 class="text-muted mb-3"><a style="margin-right: 10px;">最近更新时间: {{ CM_time }}</a>
        <a href="/refresh" class="btn btn-primary">立即更新</a>
    </h6>

    <div class="row">
        {% for hostname in result %}
            <div class="col-12 col-lg-3">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">{{ hostname }} Cpu利用率：%</h5>
                    </div>
                    <div class="card-body">
                        <div class="chart chart-sm">
                            <canvas id="{{ hostname }}_cpu"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
        {% for hostname in result %}
        <div class="col-12 col-lg-3">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">{{ hostname }} 内存利用率：M</h5>
                </div>
                <div class="card-body">
                    <div class="chart chart-sm">
                        <canvas id="{{ hostname }}_Mem"></canvas>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

    <div class="row">
        {% for hostname,items in result.items %}
            <div class="col-12 col-lg-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">{{ hostname }} Root 总计:{{ items.Disk.disk_root_Size }}G</h5>
                    </div>
                    <div class="card-body">
                        <div class="chart chart-sm">
                            <canvas id="{{ hostname }}_Disk_Root"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">{{ hostname }} Boot 总计:{{ items.Disk.disk_boot_Size }}G</h5>
                    </div>
                    <div class="card-body">
                        <div class="chart chart-sm">
                            <canvas id="{{ hostname }}_Disk_Boot"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">{{ hostname }} Home 总计:{{ items.Disk.disk_home_Size }}G</h5>
                    </div>
                    <div class="card-body">
                        <div class="chart chart-sm">
                            <canvas id="{{ hostname }}_Disk_Home"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>

    <div class="row">
        {% for hostname,items in result.items %}
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">{{ hostname }}  监听端口</h5>
                    <h6 class="card-subtitle text-muted">列表为"netstat -lntp"的结果</h6>
                </div>
                <div class="card-body">
                    <table id="datatables-multi_{{ items.ID }}_port" class="table table-striped" style="width:100%">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>协议</th>
                                <th>本地地址:端口</th>
                                <th>外部地址:端口</th>
                                <th>状态</th>
                                <th>PID/进程名称</th>
                            </tr>
                        </thead>
                        
                        <tbody>
                            {% for id,item in items.Port.items %}
                            <tr>
                                <td>{{ id }}</td>
                                <td>{{ item.0 }}</td>
                                <td>{{ item.3 }}</td>
                                <td>{{ item.4 }}</td>
                                <td>{{ item.5 }}</td>
                                <td>{{ item.6 }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
{% endblock main_content %}


{% block script %}
<script src="/assets/libs/datatables/datatables.min.js"></script>
<script>
    $(function() {
    var $theme = {
        primary: "#2c7be5",
        secondary: "#6e84a3",
        tertiary: "#5997eb",
        success: "#00d97e",
        info: "#39afd1",
        warning: "#f6c343",
        danger: "#e63757"
    };

    {% for hostname,items in result.items %}
        new Chart(document.getElementById("{{ hostname }}_cpu"), {
            type: "pie",
            data: {
                labels: ["用户占用", "内核占用", "优先进程","剩余CPU"],
                datasets: [{
                    data: [{{ items.CPU.cpu_us }}, {{ items.CPU.cpu_sy }}, {{ items.CPU.cpu_ni }}, {{ items.CPU.cpu_free }}],
                    backgroundColor: [
                        $theme.warning,
                        $theme.danger,
                        $theme.info,
                        $theme.success
                    ],
                    borderColor: "transparent"
                }]
            },
            options: {
                maintainAspectRatio: false,
                tooltips: {
                    displayColors: false
                },
                legend: {
                    display: true
                }
            }
        });

        new Chart(document.getElementById("{{ hostname }}_Mem"), {
            type: "pie",
            data: {
                labels: ["已用", "剩余",],
                datasets: [{
                    data: [{{ items.Mem.Mem_used }}, {{ items.Mem.Mem_free }}],
                    backgroundColor: [
                        $theme.danger,
                        $theme.success
                    ],
                    borderColor: "transparent"
                }]
            },
            options: {
                maintainAspectRatio: false,
                tooltips: {
                    displayColors: false
                },
                legend: {
                    display: true
                }
            }
        });

        new Chart(document.getElementById("{{ hostname }}_Disk_Root"), {
            type: "pie",
            data: {
                labels: ["已用", "剩余",],
                datasets: [{
                    data: [{{ items.Disk.disk_root_Use }}, {{ items.Disk.disk_root_Avail }}],
                    backgroundColor: [
                        $theme.danger,
                        $theme.success
                    ],
                    borderColor: "transparent"
                }]
            },
            options: {
                maintainAspectRatio: false,
                tooltips: {
                    displayColors: false
                },
                legend: {
                    display: true
                }
            }
        });

        new Chart(document.getElementById("{{ hostname }}_Disk_Boot"), {
            type: "pie",
            data: {
                labels: ["已用", "剩余",],
                datasets: [{
                    data: [{{ items.Disk.disk_boot_Use }}, {{ items.Disk.disk_boot_Avail }}],
                    backgroundColor: [
                        $theme.danger,
                        $theme.success
                    ],
                    borderColor: "transparent"
                }]
            },
            options: {
                maintainAspectRatio: false,
                tooltips: {
                    displayColors: false
                },
                legend: {
                    display: true
                }
            }
        });
        new Chart(document.getElementById("{{ hostname }}_Disk_Home"), {
            type: "pie",
            data: {
                labels: ["已用", "剩余",],
                datasets: [{
                    data: [{{ items.Disk.disk_home_Use }}, {{ items.Disk.disk_home_Avail }}],
                    backgroundColor: [
                        $theme.danger,
                        $theme.success
                    ],
                    borderColor: "transparent"
                }]
            },
            options: {
                maintainAspectRatio: false,
                tooltips: {
                    displayColors: false
                },
                legend: {
                    display: true
                }
            }
        });
    {% endfor %}

    {% for hostname,items in result.items %}
    var datatablesMulti = $("#datatables-multi_{{ items.ID }}_port").DataTable({
        language: { // ajax 获取语言文件
            "url": "assets/libs/datatables/Chinese.json"
        },
        select: {
            style: "multi"
        }
    });
    {% endfor %}
    });

</script>
{% endblock script %}